<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    

        <div id="editor">
                <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
            </div>
 
 
            <div id="show">

            </div>


            <button onclick="get()">提交</button>
 
            <script type="text/javascript" src="http://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

    <script>
        var E = window.wangEditor;
        var editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )


        editor.customConfig.uploadImgServer = 'http://localhost:8080/editor/upload'
        editor.customConfig.uploadFileName = 'file'
        editor.customConfig.uploadImgHooks = {
  
            success: function (xhr, editor, result) {
              
            },
            customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
         
            console.log(result);
            insertImg(result.data)

            // result 必须是一个 JSON 格式字符串！！！否则报错
    }
        }
        editor.create()


        function get(){

                $.ajax({
                    url:"http://localhost:8080/editor/save",
                    data:{
                        html:editor.txt.html()
                    },
                    type:'POST',
                    success:function(data){

                        $("#show").html(data.data);
                      
                    }
                })
            console.log(editor.txt.html())
        }
    </script>
</body>
</html>